<template>
  <el-dialog v-model="props.updateDialog" title="修改车间" width="60%" :close-on-click-modal="false"
             @close="handleClose">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="room-form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="车间编码" prop="workshopCode">
            <el-input v-model="form.workshopCode" placeholder="请输入车间编码" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车间名称" prop="workshopName" required>
            <el-input v-model="form.workshopName" placeholder="请输入车间名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="面积">
            <el-input-number
                v-model="form.area"
                :min="0"
                :step="10"
                placeholder="0"
                class="w-full"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="负责人" prop="principal">
            <el-input v-model="form.principal" placeholder="请输入负责人"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否启用" prop="isEnabled" required>
            <el-radio-group v-model="form.isEnabled">
              <el-radio :label="true" value="0">是</el-radio>
              <el-radio :label="false" value="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input
            v-model="form.remark"
            type="textarea"
            rows="3"
            placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, watch} from 'vue'
import {ElMessage} from 'element-plus'
import {updateFixtureLedger} from "@/apis/zyj/FixtureLedger.js";
import {updateWorkshop} from "@/apis/zyj/workshop.js";

const props = defineProps({
  updateDialog: Boolean,
  form: Object
})

const emit = defineEmits(['close'])

const formRef = ref()

const rules = {
  workshopCode: [
    {required: true, message: '请输入车间编码', trigger: 'blur'},
  ],
  workshopName: [
    {required: true, message: '请输入车间名称', trigger: 'blur'},
  ],
  isEnabled: [
    {required: true, message: '请选择是否启用', trigger: 'change'}
  ]
}

const handleClose = () => {
  emit('close')
}

const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    updateWorkshop(props.form).then(req => {
      console.log(req)
      if (req === '成功') {
        ElMessage.success('修改成功')
        handleClose()
      } else {
        ElMessage.error('修改失败')
      }
    })
  } catch (error) {
    ElMessage.error('请填写完整信息')
  }
}

</script>

<style scoped>
.room-form {
  padding: 20px;
}

.w-full {
  width: 100px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-input-number) {
  width: 200px;
  height: 35px;
}
</style>